<template>
  <!-- 实时发展明细 -->
  <div class="monitor-detials">
    <!-- 展示类型1：表格展现 - 适用于管理层 -->
    <van-loading v-if="isLoading" type="spinner" color="#1989fa" />
    <div v-else class="detail-info" v-for="(item,index) in tableData" :key="index">
      <img class="item-img-user" src="~@/assets/imgs/publicline/board/icon-users.png" />
      <div class="info-content">
        <div class="info-detail">
          <span class="info-name">{{ item.LEVEL_NAME }}</span>
          <span class="info-flag">{{ item.LEVEL_ID }}</span>
        </div>
        <div class="info-tc" v-if="type == 'yw'">
          <div class="info-desc">移网发展
            <span v-if="item.GSM_DEV == 0">{{ item.GSM_DEV }} 户</span>
            <span v-else class="textunder" @click="orgClick('yw', item)">{{ item.GSM_DEV }} 户</span>
          </div>
          <div class="info-desc">5G新增
            <span v-if="item.GSM_DEV_5GNEW == 0">{{ item.GSM_DEV_5GNEW }} 户</span>
            <span v-else class="textunder" @click="orgClick('5gxz', item)">{{ item.GSM_DEV_5GNEW }} 户</span>
          </div>
          <div class="info-desc">5G迁转
            <span v-if="item.GSM_DEV_5GTRAN == 0">{{ item.GSM_DEV_5GTRAN }} 户</span>
            <span v-else class="textunder" @click="orgClick('5gqz', item)">{{ item.GSM_DEV_5GTRAN }} 户</span>
          </div>
          <div class="info-desc">5G升级包
            <span v-if="item.GSM_DEV_5GUP == 0">{{ item.GSM_DEV_5GUP }} 户</span>
            <span v-else class="textunder" @click="orgClick('5gsjb', item)">{{ item.GSM_DEV_5GUP }} 户</span>
          </div>
          <div class="info-desc">冰激凌
            <span v-if="item.GSM_DEV_BJL == 0">{{ item.GSM_DEV_BJL }} 户</span>
            <span v-else class="textunder" @click="orgClick('bjl', item)">{{ item.GSM_DEV_BJL }} 户</span>
          </div>
          <div class="info-desc">百元折算
            <span v-if="item.GSM_DEV_2I == 0">{{ item.GSM_DEV_2I }} 户</span>
            <span v-else class="textunder" @click="orgClick('byzs', item)">{{ item.GSM_DEV_2I }} 户</span>
          </div>
        </div>
        <div class="info-tc" v-if="type == 'gw'">
          <div class="info-desc">固网发展
            <span v-if="item.LOCA_DEV == 0">{{ item.LOCA_DEV }} 户</span>
            <span v-else class="textunder" @click="orgClick('gwfz', item)">{{ item.LOCA_DEV }} 户</span>
          </div>
          <div class="info-desc">宽带
            <span v-if="item.LOCA_DEV_KD == 0">{{ item.LOCA_DEV_KD }} 户</span>
            <span v-else class="textunder" @click="orgClick('kd', item)">{{ item.LOCA_DEV_KD }} 户</span>
          </div>
          <div class="info-desc">千兆
            <span v-if="item.LOCA_DEV_QZ == 0">{{ item.LOCA_DEV_QZ }} 户</span>
            <span v-else class="textunder" @click="orgClick('qz', item)">{{ item.LOCA_DEV_QZ }} 户</span>
          </div>
          <div class="info-desc">融合发展
            <span v-if="item.COMB_DEV == 0">{{ item.COMB_DEV }} 户</span>
            <span v-else class="textunder" @click="orgClick('rhfz', item)">{{ item.COMB_DEV }} 户</span>
          </div>
          <div class="info-desc">提速包
            <span v-if="item.LOCA_DEV_TSB == 0">{{ item.LOCA_DEV_TSB }} 户</span>
            <span v-else class="textunder" @click="orgClick('tsb', item)">{{ item.LOCA_DEV_TSB }} 户</span>
          </div>
        </div>
        <div class="info-tc" v-if="type == 'xz'">
          <div class="info-desc">携转指标
            <span v-if="item.TRAN_DEV == 0">{{ item.TRAN_DEV }} 户</span>
            <span v-else class="textunder" @click="orgClick('xz', item)">{{ item.TRAN_DEV }} 户</span>
          </div>
          <div class="info-desc">携入用户数
            <span v-if="item.TRAN_DEV_INPUT == 0">{{ item.TRAN_DEV_INPUT }} 户</span>
            <span v-else class="textunder" @click="orgClick('xr', item)">{{ item.TRAN_DEV_INPUT }} 户</span>
          </div>
          <div class="info-desc">携出用户数
            <span v-if="item.TRAN_DEV_OUTPUT == 0">{{ item.TRAN_DEV_OUTPUT }} 户</span>
            <span v-else class="textunder" @click="orgClick('xc', item)">{{ item.TRAN_DEV_OUTPUT }} 户</span>
          </div>
        </div>
        <div class="info-tc" v-if="type == 'zh'">
          <div class="info-desc">智慧家庭
            <span v-if="item.ZHJT_DEV == 0">{{ item.ZHJT_DEV }} 户</span>
            <span v-else class="textunder" @click="orgClick('zj', item)">{{ item.ZHJT_DEV }} 户</span>
          </div>
          <div class="info-desc">沃家组网
            <span v-if="item.ZHJT_DEV_WJZW == 0">{{ item.ZHJT_DEV_WJZW }} 户</span>
            <span v-else class="textunder" @click="orgClick('wjzw', item)">{{ item.ZHJT_DEV_WJZW }} 户</span>
          </div>
          <div class="info-desc">沃家神眼
            <span v-if="item.ZHJT_DEV_WJSY == 0">{{ item.ZHJT_DEV_WJSY }} 户</span>
            <span v-else class="textunder" @click="orgClick('wjsy', item)">{{ item.ZHJT_DEV_WJSY }} 户</span>
          </div>
          <div class="info-desc">TV增值
            <span v-if="item.ZHJT_DEV_IPTV == 0">{{ item.ZHJT_DEV_IPTV }} 户</span>
            <span v-else class="textunder" @click="orgClick('iptv', item)">{{ item.ZHJT_DEV_IPTV }} 户</span>
          </div>
          <div class="info-desc">沃家固话
            <span v-if="item.ZHJT_DEV_WJGH == 0">{{ item.ZHJT_DEV_WJGH }} 户</span>
            <span v-else class="textunder" @click="orgClick('wjgh', item)">{{ item.ZHJT_DEV_WJGH }} 户</span>
          </div>
        </div>
        <div class="info-tc" v-if="type == 'zyx'">
          <div class="info-desc">装移修
            <span>{{ item.ZYX }} 户</span>
          </div>
          <div class="info-desc">装机完成
            <span v-if="item.ZJWC == 0">{{ item.ZJWC }} 户</span>
            <span v-else class="textunder" @click="orgClick('zjwc', item)">{{ item.ZJWC }} 户</span>
          </div>
          <div class="info-desc">装机在途
            <span v-if="item.ZJZT == 0">{{ item.ZJZT }} 户</span>
            <span v-else class="textunder" @click="orgClick('zjzt', item)">{{ item.ZJZT }} 户</span>
          </div>
          <div class="info-desc">移机完成
            <span v-if="item.YJWC == 0">{{ item.YJWC }} 户</span>
            <span v-else class="textunder" @click="orgClick('yjwc', item)">{{ item.YJWC }} 户</span>
          </div>
          <div class="info-desc">移机在途
            <span v-if="item.YJZT == 0">{{ item.YJZT }} 户</span>
            <span v-else class="textunder" @click="orgClick('yjzt', item)">{{ item.YJZT }} 户</span>
          </div>
          <div class="info-desc">修障完成
            <span v-if="item.XJWC == 0">{{ item.XJWC }} 户</span>
            <span v-else class="textunder" @click="orgClick('xzwc', item)">{{ item.XJWC }} 户</span>
          </div>
          <div class="info-desc">修障在途
            <span v-if="item.XJZT == 0">{{ item.XJZT }} 户</span>
            <span v-else class="textunder" @click="orgClick('xzzt', item)">{{ item.XJZT }} 户</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { accountDate } from '@/api/common.js'

import { realMonitorYw, realMonitorGw, realMonitorXz, realMonitorZh, realMonitorZyx } from '@/api/publicline/index.js'

export default {
  data() {
    return {
      isLoading: true,
      type: "",
      dayId: '',
      urlPath: {
        xz: realMonitorXz,
        yw: realMonitorYw,
        gw: realMonitorGw,
        zh: realMonitorZh,
        zyx: realMonitorZyx,
      },
      tableData: []
    };
  },
  created() {
    this.type = this.$route.query.type
    this.getAccountDate()
  },
  methods: {
    // 获取账期
    async getAccountDate() {
      const res = await accountDate({ PARAMCODE: 'D' })
      const { result, success } = res
      if (success) {
        this.dayId = result[0].value
        this.getList()
      }
    },
    async getList() {
      this.isLoading = true
      const params = {
        gridId: this.$gridId,
        dayId: this.dayId,
        loginId: this.$isCeo ? '' : this.$dataPermission
      }
      const res = await this.urlPath[this.type](params)
      const { result, success } = res
      if (success) {
        this.tableData = result
        this.isLoading = false
      }
    },
    orgClick( title, item ) {
      this.$open.call(this, '/publicline/monitor-users',
        {
          type: this.type,
          lvlid: item.LEVEL_ID,
          title
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/less/person.less';
.detail-info {
  margin-top: 12px;
  .info-detail {
    display: flex;
    align-items: center;
  }
  .info-tc {
    flex-wrap: wrap;
  }
  .info-desc {
    width: 50%;
    > span {
      padding-left: 12px;
    }
    .textunder {
      color: #4D98FF;
      text-decoration: underline;
    }
  }
}
/deep/ .van-loading {
  text-align: center;
  padding: 40px 0;
}
</style>